<template>
  <div class="HotFilm" id="app">
    <div class="movie-grid">
      <div class="panel">
        <div class="panel-header">
            <span class="panel-more">
              <a href="/films?showType=1" class="textcolor_red" data-act="all-playingMovie-click">
                <router-link to="/movies_left">
                  <span style="margin-right: 175px ">全部</span>
                </router-link>
             </a>
          <span class="panel-arrow panel-arrow-red"></span>
          </span>
          <span class="panel-title">
             <span class="textcolor_red"><h2>正在热映（44部）</h2></span>
            </span>
        </div>
        <div class="panel-content">
          <dl class="movie-list">
            <router-link to="/moviesdetail">
              <dd v-for="item in movieList" :key="item.filmId">
                <div class="movie-item">
                  <a href="/film/3606" target="_blank" data-act="playing-click" data-val="{movieid:3606}">
                    <div class="movie-poster">
                      <img class="movie-poster-img" :src="item.cover">
                      <div class="movie-overlay movie-overlay-bg">
                        <div class="movie-info">
                          <div class="movie-score">
                            <i class="integer">{{item.score}}</i>
                          </div>
                          <div class="movie-title movie-title-padding" >{{item.filmName}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                  <router-link to="/cinema">
                    <div class="movie-detail movie-detail-strong movie-sale">
                      <a href="/cinemas?movieId=3606" class="active" target="_blank" data-act="salePlayingMovie-click" data-val="{movieid:3606}">购 票</a>
                    </div>
                  </router-link>

                </div>
              </dd>
            </router-link>

          </dl>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
  /*组件容器样式*/
  .HotFilm {
    width: 1200px;
    margin: 0 auto;
  }
  /*热映图片容器div样式*/
  .panel-content {
    overflow: hidden;
    width: 100%;
    margin-top: 23px;
  }
  /*热映图片列表样式*/
  .movie-list {
    margin: -29px 0 20px -25px;
  }
  /*热映内容样式*/
  .movie-list dd {
    margin: 30px 0 0 30px;
    display: inline-block;
    vertical-align: top;
    position: relative;
  }
  .movie-poster .movie-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .movie-overlay-bg {
    background: url() repeat-x bottom;
  }
  .movie-item {
    position: relative;
    border: 1px solid #e9e4e4;
    margin: -1px;
  }
  .movie-detail-strong {
    height: 39px;
    line-height: 39px;
  }
  .movie-sale a {
    display: block;
    color: #999;
    font-size: 18px;
  }
  .movie-detail {
    height: 34px;
    line-height: 34px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .movie-sale a.active {
    color: #ef4238;
    text-decoration: none;
  }
  .movie-poster {
    background-color: #fcfcfc;
    width: 232px;
    height: 322px;
    overflow: hidden;
    position: relative;
  }
  .movie-poster .poster-default {
    top: 50%;
    left: 50%;
    width: 68px;
    height: 62px;
    margin-top: -31px;
    margin-left: -34px;
  }
  .movie-poster .movie-poster-img[src] {
    max-width: 100%;
    visibility: visible;
  }
  .movie-poster .movie-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .movie-sale a {
    display: block;
    color: #999;
    font-size: 14px;
  }
  .movie-overlay .movie-info {
    color: #fff;
    position: absolute;
    bottom: 7px;
    width: 100%;
  }
  .movie-score {
    color: #ffb400;
    float: right;
    margin-right: 10px;
  }
  .movie-score .integer {
    font-size: 18px;
  }
  .movie-score .fraction {
    font-size: 14px;
  }
  .movie-title-padding {
    margin-right: 35px;
  }

  /*热映标题栏样式*/
  .panel-more {
    font-size: 30px;
    line-height: 16px;
    float: right;
    margin-top: 10px;
  }
  /*箭头图片未写*/
  /*  .panel-arrow-red {
      background: url() top no-repeat;
    }*/
  .textcolor_red {
    color: #ef4238!important;
  }
  .panel-title {
    font-size: 30px;
    color: #f15b6c;
  }
  .panel-arrow-red {
    background: url() top no-repeat;
  }
  /*即将上映*/
  .textcolor_blue {
    color: #2d98f3!important;
  }
  .panel-arrow-blue {
    background: url() top no-repeat;
  }
</style>
<script>
  import axios from 'axios'
  import List from "../The_list/list";
  export default {
    name: "HotFilm",
    components: {List},
    data(){
      return{
        movieList:[]
      }
    },
    mounted() {
      /*
      * 请求正在热映
      * 后端：陈德维*/
      axios.get('/film/onFire')
        .then(
          (resp) => {
            console.log("调用api")

            console.log(resp);
            const data = resp.data;
            this.movieList = data;
            /*this.cinemalist = data.list;*/
            /* this.weekendList = data.weekendList
             this.recommendList=data.recommendList*/
          },
          (err) => {
            console.log(err);
          }
        )

      //Vuex
    },
  }
</script>
